<template>
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<view class="title-contents"><view class="top-view status"></view></view>
		<!-- #endif -->
		<view class="login-title">
			<view class="logo"><image src="/static/images/common/logo.png" mode=""></image></view>
		</view>
		<!-- 密码登录 -->
		<view class="login-phone form-wapper">
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-shouji"></text></view>
				<view class="mobile rside"><input placeholder-class="input-placeholder" v-model="username"  type="number" placeholder="请输入手机号" /></view>
			</view>
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-yanzhengma"></text></view>
				<view class="mobile rside"><input placeholder-class="input-placeholder" v-model="vercode" type="number"  placeholder="请输入验证码" /></view>
				<view >
					<u-code :seconds="seconds" ref="uCode" @change="codeChange">
					</u-code>
					<!-- <u-button  color="#fdd100"></u-button> -->
					<button @tap="getCode" type="default">{{tips}}</button>
				</view>
			</view>
			<view class="code input-wapper">
				<view class="lside"><text class="iconfont icon-mima2"></text></view>
				<view class="rside"><input placeholder-class="input-placeholder" v-model="password" type="password" maxlength="12"  placeholder="请输入密码(6-12位) " /></view>
			</view>
		</view>

		<button type="primary" class="login-btn" @click="reg">注册</button>
		<view class="reg-paw"><text class="active" @click="back">已有账号,返回登录</text></view>
	</view>
</template>
<script>
	import {postreg,sendSms} from '@/api/user.js';
	export default{
		data(){
			return{
				username:'',
				password:'',
				vercode:'',
				tips:'获取验证码',
				seconds: 20,
			}
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (uni.$u.test.mobile(this.username)) {
					if(this.$refs.uCode.canGetCode){
						uni.showLoading({
							title: '正在获取验证码'
						})
						sendSms({
							mobile: this.username,
							type: "register"
						}).then((res) => {
							// console.log(res)
							console.log(res.data)
							if (res.code == 0) {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast(res.data);
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							} else{
								uni.$u.toast(res.msg);
							}
						})
					}else{
						uni.$u.toast('倒计时结束后再发送');
					}
					
					
				}else{
					uni.$u.toast('请输入手机号');
				}
			},
			reg(){
				let {password,vercode,username} = this;
				if(!/^1[3-9]\d{9}$/.test(username)){
					this.$toast('手机号码格式错误');
					return;
				}
				if(!/^\d{6}$/.test(vercode)){
					this.$toast('验证码格式错误');
					return;
				}
				if(!/^\w{6,12}$/.test(password)){
					this.$toast('密码格式错误');
					return;
				}
				postreg({username,password,vercode}).then((res)=>{
					// console.log(res)
					if (res.code==0) {
						uni.$u.toast("注册成功");
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
				})
			}
		}
	}
</script>
<style lang="scss">
@import  "login.scss"
</style>
